import PropTypes from 'prop-types'
import React from 'react'
import marked from 'marked'
import Helmet from 'react-helmet'
import {
  inject,
  observer,
} from 'mobx-react'
import green from '@material-ui/core/colors/green'
import { withStyles } from '@material-ui/core/styles'
// import Paper from '@material-ui/core/Paper'
import { CircularProgress } from '@material-ui/core/CircularProgress'
import Container from '../layout/container'
import { topicDetailStyle } from './styles'
// import Reply from './reply'
import TopicStore from '../../store/topic-store'

@inject((stores) => {
  return {
    topicStore: stores.topicStore,
  }
}) @observer
class TopicDetail extends React.Component {
  componentDidMount() {
    // do something here
    const id = this.getTopicId()
    this.props.topicStore.getTopicDetail(id).catch((err) => {
      console.error('detail did mount error:', err) // eslint-disable-line
    })
  }

  getTopicId() {
    return this.props.match.params.id
  }

  render() {
    const { classes } = this.props
    // const id = this.getTopicId()
    // const topic = this.props.topicStore.detailMap[id]

    const topic = {
      title: 'this is title',
      username: '用户',
      reply_count: 20,
      visit_count: 30,
      create_at: '2018/07/11',
      last_reply_at: '2018/07/12',
      tab: 'share',
      content: '123456',
      id: '1234',
    }
    if (!topic) { // topic 不存在加载 loading
      return (
        <Container>
          <section className={classes.loadingContainer}>
            <CircularProgress style={{ color: green[500] }} size={100} />
          </section>
        </Container>
      )
    }
    return [
      <Container key={topic.id}>
        <Helmet>
          <title>{topic.title}</title>
        </Helmet>
        <header className={classes.header}>
          <h3>{topic.title}</h3>
        </header>
        <section className={classes.body}>
          <p dangerouslySetInnerHTML={{ __html: marked(topic.content) }} />  {/* eslint-disable-line */}
        </section>
      </Container>,

    ]
  }
}

TopicDetail.propTypes = {
  topicStore: PropTypes.instanceOf(TopicStore),
  classes: PropTypes.object.isRequired,
  match: PropTypes.object.isRequired,
}

export default withStyles(topicDetailStyle)(TopicDetail)
